<template>
    <div class="teaarchive">
        <el-card class="box-card">
            <p>教师档案</p>
            <el-form :model="queryParams" :inline="true" label-width="80px">
                <el-form-item label="年级" prop="year">
                    <el-select v-model="queryParams.year" clearable filterable placeholder="请选择年级"
                        @change="getqueryFormclassList">
                        <el-option v-for="dict in dict.type.year_type" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="班级" prop="classId">
                    <el-select v-model="queryParams.classId" :disabled='isClassDisabled' clearable filterable
                        placeholder="请选择班级">
                        <el-option v-for="item in classList" :key="item.id" :label="item.label" :value="item.id"
                            size="small">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学历：">
                    <el-select v-model="queryParams.education" placeholder="请选择学历" clearable size="small">
                        <el-option v-for="dict in educationOptions" :key="dict.dictValue" :label="dict.dictLabel"
                            :value="dict.dictValue" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="cyan" icon="el-icon-search" size="mini" @click="search">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="rest">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card style="margin-top: 30px;">
            <div style="display: flex; flex-wrap: wrap;">
                <div class="teacherList" v-for="(item, index) in teacherList" :key="index">
                    <div class="teacherList_first">
                        <div>
                            <img :src="item.headmage" alt="">
                            <p>
                                <span style="font-weight: 600;">{{ item.name }}</span>
                                <span style="font-size: 14px;margin-top: 5px;color: #666;">
                                    {{ item.sex === '0' ? '男' : item.sex === '1' ? '女' : '未知' }}

                                    {{ item.age }}岁</span>
                            </p>
                        </div>
                        <el-button plain size="mini" @click="view(item)">查看</el-button>
                    </div>
                    <div class="teacherList_last">
                        <span>班级：</span>
                        <el-tooltip v-if="item.teacherClass" class="item" effect="dark" :content="item.teacherClass"
                            placement="top-start">
                            <span style="width: 180px;">{{ item.teacherClass }}</span>
                        </el-tooltip>
                        <!-- <span>职务：老师</span> -->
                    </div>
                </div>
            </div>
            <!-- <div class="list-main-btn" v-if="teacherList.length > 0">
              <el-button type="primary" class="left-btn" :disabled='queryParams.pageNum==1' @click="prevPage">上一页</el-button>
              <el-button type="primary" class="right-btn" :disabled='queryParams.pageNum == parseInt(total / queryParams.pageSize) + 1'  @click="nextPage">下一页</el-button>
            </div> -->
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="addTeacherFiles" />
        </el-card>
    </div>
</template>

<script>
import { selectClazz } from "@/api/base/clazz";
import { addTeacherFiles } from '@/api/base/teacher'
export default {
    dicts: ['year_type'],
    data() {
        return {
            queryParams: {
                classId: '',
                pageSize:10,
                pageNum:1
            },
            classList: [],
            isClassDisabled: true, //班级disabled
            teacherList: [],
            // 学历字典
            educationOptions: [],
            total:null
        };
    },
    mounted() {
        this.addTeacherFiles();
        this.getDicts("base_education").then(response => {
            this.educationOptions = response.data;
        });
    },
    methods: {
          // 上一页
          prevPage(){
            this.queryParams.pageNum--;
            this.addTeacherFiles()
          },
          // 下一页
          nextPage(){
            this.queryParams.pageNum++;
            this.addTeacherFiles()
          },
        // 学历字典翻译
        // educationFormat(row, column) {
        //   return this.selectDictLabel(this.educationOptions, row.education);
        // },
        /**班级*/
        async getqueryFormclassList() {
            this.isClassDisabled = true
            this.queryParams.classId = null
            try {
                let params = {}
                this.queryParams.classId = ''
                if (this.queryParams.year) params.year = this.queryParams.year;
                const { rows } = await selectClazz(params);
                if (rows.length && this.queryParams.year) {
                    this.isClassDisabled = false
                }
                this.classList = rows.map(item => {
                    return {
                        id: item.id,
                        label: item.title,
                    }
                })
            } catch (e) {
                console.log(e)
            }
        },
        async addTeacherFiles() {
            try {
                const { rows, code, msg,total } = await addTeacherFiles(this.queryParams)
                if (code === 200) {
                    this.teacherList = rows
                    this.total = total;
                } else {
                    this.$message.error(msg)
                }
            } catch (error) {
                console.log(error)
            }
        },
        search() {
            this.addTeacherFiles()
        },
        view(row) {
            this.$router.push('detail' + '?id=' + row.id)
        },
        rest() {
            this.isClassDisabled = true
            this.queryParams = {
                classId: ""
            }
            this.search()
        }
    },
};
</script>

<style scoped lang="scss">
.teaarchive {
    padding: 20px;

    .teacherList {
        width: 23%;
        padding: 16px;
        border-radius: 4px;
        border: 1px solid #dddddd;
        margin: 0 1% 16px;
        // width: 300px;
        // padding: 5px 15px;
        // border: 1px solid #ddd;
        // border-radius: 5px;
        // margin-right: 20px;
        // margin-bottom: 20px;

        img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }

        .teacherList_first {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .el-button {
                width: 65px;
                height: 35px;
                border-color: #0088FF;
                color: #0088FF;
            }

            div {
                display: flex;
                align-items: center;

                p {
                    display: flex;
                    flex-direction: column;
                    margin-left: 20px;
                }
            }
        }

        .teacherList_last {
            display: flex;
            margin-bottom: 10px;
            font-size: 14px;

            span {
                display: inline-block;
                color: #333333;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                // margin: 10px 0 0 30px;
            }
        }
    }
}
.list-main-btn{
      text-align: center;
}
</style>
